<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境空气质量查询 - 浙政钉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 页面头部 -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button onclick="goBack()" class="text-gray-600">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-lg font-semibold text-gray-800">环境空气质量</h1>
                </div>
                <div class="flex items-center space-x-3">
                    <button onclick="toggleView()" class="text-gray-600">
                        <i class="fas fa-th text-lg"></i>
                    </button>
                    <button onclick="refreshData()" class="text-gray-600">
                        <i class="fas fa-sync-alt text-lg"></i>
                    </button>
                </div>
            </div>
        </header>

        <div class="p-4">
            <!-- 实时空气质量概览 -->
            <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-lg font-bold">宁海县空气质量</h2>
                        <div class="flex items-center space-x-4 mt-2">
                            <div>
                                <span class="text-3xl font-bold">68</span>
                                <span class="text-green-100 ml-1">AQI</span>
                            </div>
                            <div>
                                <span class="text-sm text-green-100">良好</span>
                                <p class="text-xs text-green-100">主要污染物：PM2.5</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                            <i class="fas fa-wind text-2xl"></i>
                        </div>
                        <p class="text-xs text-green-100 mt-1">2024-01-15 14:00</p>
                    </div>
                </div>
            </div>

            <!-- 监测因子快速查看 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">监测因子</h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="card text-center cursor-pointer" onclick="selectFactor('AQI')">
                        <div class="text-lg font-bold text-green-600">68</div>
                        <div class="text-xs text-gray-500">AQI</div>
                        <div class="text-xs text-green-600 mt-1">良好</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('PM2.5')">
                        <div class="text-lg font-bold text-yellow-600">45</div>
                        <div class="text-xs text-gray-500">PM2.5</div>
                        <div class="text-xs text-yellow-600 mt-1">μg/m³</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('PM10')">
                        <div class="text-lg font-bold text-green-600">65</div>
                        <div class="text-xs text-gray-500">PM10</div>
                        <div class="text-xs text-green-600 mt-1">μg/m³</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('O3')">
                        <div class="text-lg font-bold text-blue-600">128</div>
                        <div class="text-xs text-gray-500">O3</div>
                        <div class="text-xs text-blue-600 mt-1">μg/m³</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('NO2')">
                        <div class="text-lg font-bold text-green-600">32</div>
                        <div class="text-xs text-gray-500">NO2</div>
                        <div class="text-xs text-green-600 mt-1">μg/m³</div>
                    </div>
                    <div class="card text-center cursor-pointer" onclick="selectFactor('SO2')">
                        <div class="text-lg font-bold text-green-600">15</div>
                        <div class="text-xs text-gray-500">SO2</div>
                        <div class="text-xs text-green-600 mt-1">μg/m³</div>
                    </div>
                </div>
            </div>

            <!-- 功能导航 -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card cursor-pointer hover:shadow-lg" onclick="showGISMapModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-map text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">GIS地图</h3>
                        <p class="text-gray-500 text-sm mt-1">站点分布与实时数据</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showRankingModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-trophy text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">空气质量排行</h3>
                        <p class="text-gray-500 text-sm mt-1">18个乡镇街道排名</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showTrendModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-chart-line text-green-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">变化趋势</h3>
                        <p class="text-gray-500 text-sm mt-1">AQI、PM2.5达标率</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showPersonalizedModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-star text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">个性化应用</h3>
                        <p class="text-gray-500 text-sm mt-1">关注站点配置</p>
                    </div>
                </div>
            </div>

            <!-- 乡镇街道空气质量快览 -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-800">乡镇街道空气质量</h3>
                    <select class="text-sm border rounded px-2 py-1" onchange="switchTimeframe(this.value)">
                        <option value="latest">最新数据</option>
                        <option value="daily">日均值</option>
                        <option value="monthly">月均值</option>
                    </select>
                </div>
                <div class="space-y-2" id="townshipList">
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                            <span class="text-sm font-medium">跃龙街道</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-gray-600">AQI: 58</span>
                            <span class="badge aqi-excellent">优</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-2 h-2 bg-green-500 rounded-full"></div>
                            <span class="text-sm font-medium">桃源街道</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-gray-600">AQI: 62</span>
                            <span class="badge aqi-good">良</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-2 h-2 bg-yellow-500 rounded-full"></div>
                            <span class="text-sm font-medium">梅林街道</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-gray-600">AQI: 78</span>
                            <span class="badge aqi-good">良</span>
                        </div>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-white rounded-lg">
                        <div class="flex items-center space-x-3">
                            <div class="w-2 h-2 bg-orange-500 rounded-full"></div>
                            <span class="text-sm font-medium">长街镇</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-gray-600">AQI: 95</span>
                            <span class="badge aqi-light">轻度污染</span>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-3">
                    <button onclick="showAllTownships()" class="text-gov-blue text-sm">查看全部18个乡镇街道</button>
                </div>
            </div>

            <!-- 达标率统计 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">达标率统计</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">AQI达标率</h4>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto mb-2 relative">
                                <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                    <circle cx="32" cy="32" r="28" stroke="#059669" stroke-width="8" fill="none" 
                                        stroke-dasharray="175.93" stroke-dashoffset="22.07"/>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-lg font-bold text-gray-800">87.5%</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">本月达标率</p>
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +3.2%
                            </p>
                        </div>
                    </div>
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">PM2.5达标率</h4>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto mb-2 relative">
                                <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                    <circle cx="32" cy="32" r="28" stroke="#3b82f6" stroke-width="8" fill="none" 
                                        stroke-dasharray="175.93" stroke-dashoffset="35.19"/>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-lg font-bold text-gray-800">80.0%</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">本月达标率</p>
                            <p class="text-xs text-blue-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +1.8%
                            </p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- 弹窗系统 -->
    <!-- GIS地图弹窗 -->
    <div id="gisMapModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">空气质量GIS地图</h3>
                <button class="modal-close" onclick="closeModal('gisMapModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <select class="w-full border rounded px-3 py-2" onchange="changeMapFactor(this.value)">
                        <option value="AQI">AQI指数</option>
                        <option value="PM2.5">PM2.5浓度</option>
                        <option value="PM10">PM10浓度</option>
                        <option value="O3">臭氧浓度</option>
                        <option value="NO2">二氧化氮浓度</option>
                        <option value="SO2">二氧化硫浓度</option>
                        <option value="CO">一氧化碳浓度</option>
                    </select>
                </div>
                <div class="bg-gray-100 rounded-lg h-64 flex items-center justify-center">
                    <div class="text-center">
                        <i class="fas fa-map-marked-alt text-4xl text-gray-400 mb-2"></i>
                        <p class="text-gray-500">地图加载中...</p>
                        <p class="text-sm text-gray-400 mt-2">显示宁海县所有监测站点</p>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-6 gap-2">
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-green-500 rounded-full mr-1"></div>
                        <span class="text-xs">优</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-yellow-500 rounded-full mr-1"></div>
                        <span class="text-xs">良</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-orange-500 rounded-full mr-1"></div>
                        <span class="text-xs">轻度</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-red-500 rounded-full mr-1"></div>
                        <span class="text-xs">中度</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-purple-500 rounded-full mr-1"></div>
                        <span class="text-xs">重度</span>
                    </div>
                    <div class="flex items-center">
                        <div class="w-3 h-3 bg-gray-800 rounded-full mr-1"></div>
                        <span class="text-xs">严重</span>
                    </div>
                </div>
                <div class="mt-4">
                    <h4 class="font-medium text-gray-700 mb-2">站点详情</h4>
                    <div class="space-y-2">
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="showStationDetail('station1')">
                            <span class="text-sm">跃龙街道站</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge aqi-excellent">优</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                        <div class="flex items-center justify-between p-2 bg-gray-50 rounded cursor-pointer" onclick="showStationDetail('station2')">
                            <span class="text-sm">桃源街道站</span>
                            <div class="flex items-center space-x-2">
                                <span class="badge aqi-good">良</span>
                                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('gisMapModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportMapData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 空气质量排行弹窗 -->
    <div id="rankingModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">空气质量排行榜</h3>
                <button class="modal-close" onclick="closeModal('rankingModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="font-medium">排名统计</h4>
                    <select class="text-sm border rounded px-2 py-1" onchange="changeRankingType(this.value)">
                        <option value="latest">最新数据</option>
                        <option value="daily">日均值</option>
                        <option value="monthly">月均值</option>
                    </select>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">1</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">跃龙街道</div>
                            <div class="text-sm text-gray-500">AQI: 58 | PM2.5: 35μg/m³</div>
                        </div>
                        <span class="badge aqi-excellent">优</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-green-50 rounded-lg">
                        <div class="w-8 h-8 bg-green-600 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">2</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">桃源街道</div>
                            <div class="text-sm text-gray-500">AQI: 62 | PM2.5: 38μg/m³</div>
                        </div>
                        <span class="badge aqi-good">良</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-yellow-50 rounded-lg">
                        <div class="w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">3</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">梅林街道</div>
                            <div class="text-sm text-gray-500">AQI: 78 | PM2.5: 55μg/m³</div>
                        </div>
                        <span class="badge aqi-good">良</span>
                    </div>
                    <div class="flex items-center space-x-3 p-3 bg-orange-50 rounded-lg">
                        <div class="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center">
                            <span class="text-white font-bold text-sm">4</span>
                        </div>
                        <div class="flex-1">
                            <div class="font-medium">长街镇</div>
                            <div class="text-sm text-gray-500">AQI: 95 | PM2.5: 68μg/m³</div>
                        </div>
                        <span class="badge aqi-light">轻度污染</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('rankingModal')">关闭</button>
                <button class="btn btn-primary" onclick="showAllRanking()">查看完整排名</button>
            </div>
        </div>
    </div>

    <!-- 变化趋势弹窗 -->
    <div id="trendModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">变化趋势分析</h3>
                <button class="modal-close" onclick="closeModal('trendModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <div class="flex space-x-2">
                        <button class="btn btn-primary text-sm px-3 py-1">最新</button>
                        <button class="btn btn-outline text-sm px-3 py-1">24小时</button>
                        <button class="btn btn-outline text-sm px-3 py-1">30日</button>
                    </div>
                </div>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">AQI变化趋势</h4>
                        <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center">
                            <p class="text-gray-500">AQI趋势图加载中...</p>
                        </div>
                        <div class="mt-2 text-center">
                            <span class="text-sm text-gray-600">当前AQI: 68</span>
                            <span class="text-sm text-green-600 ml-2">达标率: 87.5%</span>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">PM2.5变化趋势</h4>
                        <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center">
                            <p class="text-gray-500">PM2.5趋势图加载中...</p>
                        </div>
                        <div class="mt-2 text-center">
                            <span class="text-sm text-gray-600">当前PM2.5: 45μg/m³</span>
                            <span class="text-sm text-blue-600 ml-2">达标率: 80.0%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('trendModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportTrendData()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 个性化应用弹窗 -->
    <div id="personalizedModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">个性化应用设置</h3>
                <button class="modal-close" onclick="closeModal('personalizedModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">重点关注站点</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-3 border rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <input type="checkbox" checked class="rounded">
                                    <span class="text-sm">跃龙街道站</span>
                                </div>
                                <span class="badge aqi-excellent">优</span>
                            </div>
                            <div class="flex items-center justify-between p-3 border rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <input type="checkbox" checked class="rounded">
                                    <span class="text-sm">桃源街道站</span>
                                </div>
                                <span class="badge aqi-good">良</span>
                            </div>
                            <div class="flex items-center justify-between p-3 border rounded-lg">
                                <div class="flex items-center space-x-3">
                                    <input type="checkbox" class="rounded">
                                    <span class="text-sm">梅林街道站</span>
                                </div>
                                <span class="badge aqi-good">良</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">重点关注区域</h4>
                        <div class="grid grid-cols-2 gap-2">
                            <label class="flex items-center space-x-2 p-2 border rounded cursor-pointer">
                                <input type="checkbox" checked class="rounded">
                                <span class="text-sm">城区</span>
                            </label>
                            <label class="flex items-center space-x-2 p-2 border rounded cursor-pointer">
                                <input type="checkbox" class="rounded">
                                <span class="text-sm">工业区</span>
                            </label>
                            <label class="flex items-center space-x-2 p-2 border rounded cursor-pointer">
                                <input type="checkbox" checked class="rounded">
                                <span class="text-sm">居民区</span>
                            </label>
                            <label class="flex items-center space-x-2 p-2 border rounded cursor-pointer">
                                <input type="checkbox" class="rounded">
                                <span class="text-sm">景区</span>
                            </label>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-3">我的关注</h4>
                        <div class="space-y-3">
                            <div class="card">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <div class="font-medium">跃龙街道站</div>
                                        <div class="text-sm text-gray-500">AQI: 58 | 空气质量: 优</div>
                                    </div>
                                    <button onclick="quickView('station1')" class="btn btn-primary text-xs px-2 py-1">快速查看</button>
                                </div>
                            </div>
                            <div class="card">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <div class="font-medium">城区平均</div>
                                        <div class="text-sm text-gray-500">AQI: 65 | 空气质量: 良</div>
                                    </div>
                                    <button onclick="quickView('area1')" class="btn btn-primary text-xs px-2 py-1">快速查看</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('personalizedModal')">取消</button>
                <button class="btn btn-primary" onclick="saveSettings()">保存设置</button>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            parent.postMessage({type: 'navigate', page: 'home.html'}, '*');
        }

        function toggleView() {
            // 切换显示模式
            showNotification('切换显示模式', 'info');
        }

        function refreshData() {
            // 模拟数据刷新
            showNotification('数据已刷新', 'success');
        }

        function selectFactor(factor) {
            showNotification(`查看${factor}详细数据`, 'info');
        }

        function switchTimeframe(timeframe) {
            const labels = {
                'latest': '最新数据',
                'daily': '日均值',
                'monthly': '月均值'
            };
            showNotification(`切换到${labels[timeframe]}`, 'info');
        }

        // 弹窗显示函数
        function showGISMapModal() {
            document.getElementById('gisMapModal').classList.add('show');
        }

        function showRankingModal() {
            document.getElementById('rankingModal').classList.add('show');
        }

        function showTrendModal() {
            document.getElementById('trendModal').classList.add('show');
        }

        function showPersonalizedModal() {
            document.getElementById('personalizedModal').classList.add('show');
        }

        // 弹窗关闭函数
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 弹窗交互函数
        function exportMapData() {
            showNotification('正在导出地图数据...', 'success');
        }

        function exportTrendData() {
            showNotification('正在导出趋势数据...', 'success');
        }

        // 点击弹窗外部关闭
        document.addEventListener('DOMContentLoaded', function() {
            const modals = document.querySelectorAll('.modal-overlay');
            modals.forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('show');
                    }
                });
            });
        });

        function showAllTownships() {
            showNotification('加载全部18个乡镇街道数据...', 'info');
        }

        function changeMapFactor(factor) {
            showNotification(`切换地图显示${factor}`, 'info');
        }

        function showStationDetail(stationId) {
            showNotification('查看监测站详细信息', 'info');
        }

        function changeRankingType(type) {
            showNotification('更新排行榜数据', 'info');
        }

        function showAllRanking() {
            showNotification('查看完整排名', 'info');
        }

        function quickView(itemId) {
            showNotification('快速查看数据', 'info');
        }

        function saveSettings() {
            showNotification('个性化设置已保存', 'success');
        }

        function showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                warning: 'bg-yellow-500',
                danger: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 left-4 right-4 ${colors[type]} text-white p-3 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-info-circle mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>